<template>
  <HModal okText="确定" cancelText="取消" :height="600" :width="800"
          title="添加按钮" @cancel="close" :visible="visible" @ok="handleModalOK">
    <div class="add-new-bottom-content">
      <div style="height: 40px; width: 100%">
        <RowAttribute label="按钮名称">
          <a-input v-model="searchText" placeholder="请输入按钮名称" />
        </RowAttribute>
      </div>
      <div style="height: calc(100% - 45px); display: flex; width: 100%">
        <select size="10" class="add-new-bottom-content-left">
          <option v-for="button in searchedList" @dblclick="openButtonConfigModal(button)"
                  :key="button.key" :value="button.key">
            {{ button.buttonName }}
          </option>
        </select>
        <div style="width: 10px" />
        <select size="10" class="add-new-bottom-content-right">
          <option v-for="button in buttons" :key="button.id">
            {{ button.buttonName }}
          </option>
        </select>
      </div>
    </div>
    <ButtonConfigModal ref="ButtonConfigModal" :menu="menu" @ok="handleOK" :form-definition="formDefinition"/>
  </HModal>
</template>
<script>
import HModal from '@comp/hhd/HModal/HModal.vue'
import ButtonRegistry from '@comp/hhd/design/FormMenu/button/ButtonRegistry'
import RowAttribute from '@comp/hhd/layout/RowAttribute.vue'
import { createFormDefinition, createFormMenuButton } from '@comp/hhd/design/FormDesigner/types'
import { createProps } from '@/utils'
import ButtonConfigModal from '@comp/hhd/design/FormMenu/button/ButtonConfigModal.vue'

export default {
  name: 'AddNewButtonModal',
  components: {
    ButtonConfigModal,
    HModal,
    RowAttribute
  },
  props: {
    menu: createProps(Object, () => undefined),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      buttons: [],
      ButtonRegistry,
      visible: undefined,
      searchText: undefined
    }
  },
  methods: {
    handleModalOK() {
      this.$emit('ok', this.buttons)
      this.close()
    },
    handleOK(button) {
      this.buttons.push(button)
    },
    openButtonConfigModal(button) {
      let res = this.createNewButton(button)
      if (!button.config) {
        this.buttons.push(res)
        return
      }
      this.$refs.ButtonConfigModal.setData(res)
    },
    createNewButton(button) {
      let res = createFormMenuButton()
      res.formId = this.formDefinition.id
      res.formMenuId = this.menu.id
      res.buttonName = button.buttonName
      res.buttonComponent = button.key
      res.icon = button.icon
      res.config = {}
      res.rowButton = button.rowButton
      res.buttonType = button.buttonType
      res.batchButton = button.batchButton
      res.showName = button.showName
      res.buttonShape = button.buttonShape
      return res
    },
    open() {
      this.visible = true
      this.buttons = []
    },
    close() {
      this.visible = false
    }
  },
  computed: {
    searchedList() {
      let list = []
      for (const key in ButtonRegistry) {
        if (ButtonRegistry[key].hasFlow !== this.formDefinition.hasFlow) {
          continue;
        }
        list.push({ key, ...ButtonRegistry[key] });
      }
      if (!this.searchText) return list
      return list.filter(b => b.buttonName.indexOf(this.searchText) > -1)
    }
  }
}
</script>
<style>
.add-new-bottom-content {
  width: 100%;
  height: 100%;
}

.add-new-bottom-content-left {
  flex: 0.5;
  outline: none;
  overflow: auto;
  border: 1px solid #e6ebf5;
}

.add-new-bottom-content-right {
  flex: 0.5;
  outline: none;
  overflow: auto;
  border: 1px solid #e6ebf5;
}
</style>